import React, { Component } from 'react';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import './style.less';

import User from '../../server/user-server.js';
import Mutil from '../../util/mm.js';
const _mm = new Mutil();
const _user = new User();


class Login extends Component {
	constructor(props){
		super(props);
		this.state={
			username: '',
			password: '',
			redirect: _mm.getUrlParam('redirect') || '/'
		}
	}
componentWillMount() {
	document.title='登录-mall'
}

  handleConfirmBlur = (e) => {
    const value = e.target.value;
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  }
  onInputChange = (e) => {
  	let inputName = e.target.name,
  		inputValue = e.target.value;
  		console.log(inputName, inputValue)
  	this.setState({
  		[inputName]: inputValue
  	})
  }
  onSubmit = (e) => {
  	const userInfo = {
  		username : this.state.username,
  		password: this.state.password,
  	}
  	const checkResult = _user.checkLoginInfo(userInfo);

  	//验证通过
  	if(checkResult.status){
  		_user.login(userInfo).then((res) => {
  			_mm.setStorage('userInfo', res);
	  		this.props.history.push(this.state.redirect)
	  	}, (errMsg) => {
	  		_mm.errorTips(errMsg)
	  	})
  	}
  	//验证不通过
  	else{
  		_mm.errorTips(checkResult.msg);
  	}
  	
  }
 
  render()  {
	const { getFieldDecorator } = this.props.form;
  	const formItemLayout = {
	      labelCol: {
	        xs: { span: 24 },
	        sm: { span: 4 },
	      },
	      wrapperCol: {
	        xs: { span: 24 },
	        sm: { span: 12 },
	      }
    }
    return (
      <div className="login">
        <Form className="login-form">
        	<h2>欢迎登录</h2>
        	<Form.Item
				label="用户名"
				{...formItemLayout}>
        		{
					getFieldDecorator('userName', {
						initialValue: '',
						rules:[{
							message: 'Please input your username!'
						},{
							pattern: new RegExp('^\\w+$', 'g'),
							message: '用户名必须为英文字母或者数字'
						}]
					})(<Input 
						name="username"
						style={{width: 260}} 
						prefix={<Icon type="user" />} 
						placeholder="请输入用户名" 
						onChange={e=>this.onInputChange(e)}
						/>)
				}
        	</Form.Item>
        	<Form.Item
				label="密码"
				{...formItemLayout}>
				{
					getFieldDecorator('password', {
						initialValue: '',
						rules:[{
							message: 'Please input your Password!'
						},{
							pattern: /^\w+$/g,
							message: '用户名必须为英文字母或者数字'
						}]
					})(<Input 
						type="password"
						name="password"
						style={{width: 260}}  
						prefix={<Icon type="lock" />} 
						placeholder="请输入密码"  
						onChange={e=>this.onInputChange(e)}
						onBlur={this.handleConfirmBlur} />)
				}
			</Form.Item>
			<Form.Item>
	          {getFieldDecorator('remember', {
	            valuePropName: 'checked',
	            initialValue: true,
	          })(
	            <Checkbox>Remember me</Checkbox>
	          )}
	          <Button 
	          	type="primary" 
	          	htmlType="submit" 
	          	className="login-form-button"
	          	onClick={e=>this.onSubmit(e)}
	          	>
	            登录
	          </Button>
        </Form.Item>
        </Form>
      </div>
    );
  }
}

export default Form.create()(Login);
